<!--
 * @Descripttion: 
 * @version: 
 * @Author: by
 * @Date: 2021-10-21 16:27:37
 * @LastEditors: tc
 * @LastEditTime: 2022-03-08 16:06:01
-->
<template>
    <div class="middlebox">
        <div class="dengji-box">
            <div class="charts" id="charts" ref="circle"></div>
        </div>
    </div>
</template>

<script>
import huJson from '@/assets/data/hunan.json'
import {imgdu} from './img.js'
export default {
    props: {
        data: {
            default: () => {}
        }
    },
    data() {
        return {
            charts:null,
        }
    },
    watch: {
        data: {
            handler(val) {
                this.init()
            },
            deep:true
        }
    },
    mounted() {
        this.init()
    },
    unmounted() {
        this.charts.dispose()
    },
    methods: {
       init() {
            const that = this
            let myCharts = null
            that.$echarts.registerMap('湖南省', huJson, {})
            myCharts = that.$echarts.init(that.$refs.circle)
            that.charts = myCharts
            // that.renderData(this.data)
            myCharts.off('click')
            myCharts.on('click', params => {
                console.log(params)
                // that.$emit('onRiskeve', params.data.type)
            })
            myCharts.setOption(that.setOption())
            window.addEventListener('resize', function() {
                myCharts.resize()
            })
        },
        setOption() {
            const that =this
            let option = {
                geo: [
                    {
                        label: {
                            show: true,
                            color: '#fff',
                            fontSize: 14
                        },
                        zoom: 1,
                        aspectScale: '1',
                        layoutSize: '95%',
                        layoutCenter:['50%','50%'],
                        map: '湖南省',
                        roam: false, // 是否允许缩放
                        itemStyle: {
                            borderWidth: 2, //设置外层边框
                            borderColor:'#abe1ff',
                            areaColor: {
                                image: imgdu, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
                                repeat: 'repeat' // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'
                            },
                            opacity: 1,
                        },
                        silent: true,
                        zlevel: 2
                    },
                    {
                        zoom: 1,
                        aspectScale: '1',
                        layoutSize: '95%',
                        layoutCenter:['52%','52%'],
                        map: '湖南省',
                        roam: false, // 是否允许缩放
                        itemStyle: {
                            borderWidth: 2, //设置外层边框
                            borderColor:'#00c0ff',
                            areaColor:'#0053ba',
                            opacity: 0.6,
                        },
                        silent: true,
                        zlevel: 1
                    },
                ],
                series:[
                    {
                        type: 'lines',
                        name: '信号线',
                        zlevel: 3,
                        effect: {
                            show: true,
                            period: 3, //箭头指向速度，值越小速度越快
                            trailLength: 0.5, //特效尾迹长度[0,1]值越大，尾迹越长重
                            symbolSize: 5, //图标大小
                        },
                        lineStyle: {
                            color: '#00FFFF',
                            width: 1, //尾迹线条宽度
                            opacity: 0.3, //尾迹线条透明度
                            curveness: 0.3 //尾迹线条曲直度
                        },
                        data: [
                            {
                                //湘西州
                                coords: [[109.737428,28.612592],[112.604483,28.158327]],
                                // lineStyle:{
                                //     curveness:-0.3
                                // },
                                value: 0,
                            },
                            {
                                //怀化市
                                coords: [[110.001598,27.329813],[112.604483,28.158327]],
                                // lineStyle:{
                                //     curveness:-0.3
                                // },
                                value: 0,
                            },
                            {
                                //张家界市
                                coords: [[110.478887,29.497343],[112.604483,28.158327]],
                                // lineStyle:{
                                //     curveness:-0.3
                                // },
                                value: 0,
                            },
                            {
                                //常德市
                                coords: [[111.69905,29.331446],[112.604483,28.158327]],
                                // lineStyle:{
                                //     curveness:-0.3
                                // },
                                value: 0,
                            },
                            {
                                //岳阳市
                                coords: [[113.128922,28.95648],[112.604483,28.158327]],
                                // lineStyle:{
                                //     curveness:-0.3
                                // },
                                value: 0,
                            },
                            {
                                //益阳市
                                coords: [[112.055994,28.454853],[112.604483,28.158327]],
                                // lineStyle:{
                                //     curveness:-0.3
                                // },
                                value: 0,
                            },
                            {
                                //湘潭市
                                coords: [[112.745439,27.53136],[112.604483,28.158327]],
                                // lineStyle:{
                                //     curveness:-0.3
                                // },
                                value: 0,
                            },
                            {
                                //株洲市
                                coords: [[113.232783,27.728862],[112.604483,28.158327]],
                                // lineStyle:{
                                //     curveness:-0.3
                                // },
                                value: 0,
                            },
                            {
                                //郴州市
                                coords: [[113.015517,26.030117],[112.604483,28.158327]],
                                // lineStyle:{
                                //     curveness:-0.3
                                // },
                                value: 0,
                            },
                            {
                                //永州市
                                coords: [[111.613482,26.219861],[112.604483,28.158327]],
                                // lineStyle:{
                                //     curveness:-0.3
                                // },
                                value: 0,
                            },
                            {
                                //邵阳市
                                coords: [[111.267855,27.039528],[112.604483,28.158327]],
                                // lineStyle:{
                                //     curveness:-0.3
                                // },
                                value: 0,
                            },
                            {
                                //娄底市
                                coords: [[111.994468,27.499838],[112.604483,28.158327]],
                                // lineStyle:{
                                //     curveness:-0.3
                                // },
                                value: 0,
                            },
                            {
                                //衡阳市
                                coords: [[112.572016,27.14216],[112.604483,28.158327]],
                                // lineStyle:{
                                //     curveness:-0.3
                                // },
                                value: 0,
                            }
                        ]
                    }, {
                        type: 'effectScatter',
                        name: '发送点',
                        coordinateSystem: 'geo',
                        zlevel: 2,
                        // rippleEffect: { //涟漪特效
                        //     color:'#00F0FF',
                        //     period: 4, //动画时间，值越小速度越快
                        //     brushType: 'stroke', //波纹绘制方式 stroke, fill
                        //     scale: 4 //波纹圆环最大限制，值越大波纹越大
                        // },
                        label: {
                            show: true,
                            position: 'right', //显示位置
                            offset: [5, 0], //偏移设置
                            formatter: function(params){//圆环显示文字
                                return params.data.name;
                            },
                            fontSize: 13
                        },
                        emphasis: {
                            show: true
                        },
                        symbol: 'circle',
                        symbolSize: function(val) {
                            return 3+ val[2] * 5; //圆环大小
                        },
                        rippleEffect: { //涟漪特效
                            // color:'rgba(2,179,206,0.5)',
                            color:'#fff',
                            number:1,
                            period: 50, //动画时间，值越小速度越快
                            brushType: 'stroke', //波纹绘制方式 stroke, fill
                            scale: 3 //波纹圆环最大限制，值越大波纹越大
                        },
                        itemStyle: {
                            show: false,
                            color:'#FFFFFF',
                        },
                        data: [
                            {
                                //湘西州
                                name:'',
                                value: [109.737428,28.612592,1],
                            },
                            {
                                //怀化市
                                name:'',
                                value: [110.001598,27.329813,1],
                            },
                            {
                                //张家界市
                                name:'',
                                value: [110.478887,29.497343,1],
                            },
                            {
                                //常德市
                                name:'',
                                value: [111.69905,29.331446,1],
                            },
                            {
                                //岳阳市
                                name:'',
                                value: [113.128922,28.95648,1],
                            },
                            {
                                //益阳市
                                name:'',
                                value: [112.055994,28.454853,1],
                            },
                            {
                                //湘潭市
                                name:'',
                                value: [112.745439,27.53136,1],
                            },
                            {
                                //株洲市
                                name:'',
                                value: [113.232783,27.728862,1],
                            },
                            {
                                //郴州市
                                name:'',
                                value: [113.015517,26.030117,1],
                            },
                            {
                                //永州市
                                name:'',
                                value: [111.613482,26.219861,1],
                            },
                            {
                                //邵阳市
                                name:'',
                                value: [111.267855,27.039528,1],
                            },
                            {
                                //娄底市
                                name:'',
                                value: [111.994468,27.499838,1],
                            },
                            {
                                //衡阳市
                                name:'',
                                value: [112.572016,27.14216,1],
                            },
                            {   
                                //长沙市
                                name: '',
                                value: [112.604483,28.158327,1],
                            }
                        ]
                    },
                ]
            }
            return option
        }
    }
}
</script>

<style lang="scss" scoped>
.middlebox {
    height: 100%;
    box-sizing: border-box;
    .dengji-box {
        position: relative;
        width: 100%;
        box-sizing: border-box;
        height:100%;
        .charts {
            height: 100%;
            // border: 1px solid white;
        }
    }
}
</style>